<link rel="stylesheet" href="../css/element.css">
<link rel="stylesheet" href="../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>
<script src="../js/common.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>

<style>

  .box-card {
    width: 100%;
  }

</style>

<!-- 模型一 -->
<div id="timeUtil">
  <el-container>
    <el-header >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >工具</el-breadcrumb-item>
        <el-breadcrumb-item>时间戳</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main >
      <el-card class="box-card" >
        <div slot="header" class="clearfix" style="margin-left: 10%;">

          <el-row :gutter="20" >
              <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="转时间戳：">
                  <el-col :span="11">
                    <el-input  v-model="time" placeholder="时间"></el-input>
                  </el-col>
                  <el-col :span="11">
                    <el-select v-model="toUtc" placeholder="请选择" >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :sapn="5">
                    <el-button type="primary" @click="timeToCtcFuc()">转换</el-button>  
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :sapn="5">
                    <el-input  v-model="timeToUtc" placeholder="结果"></el-input>
                  </el-col>
                </el-form-item>
               
                <el-form-item>
                  <el-col :sapn="5">
                    <el-button type="primary" @click="synchro()">同步</el-button>  
                  </el-col>
                </el-form-item>
              </el-form>
              
          </el-row>
          
          <el-row :gutter="20" >
            <el-form :inline="true"  class="demo-form-inline">
              <el-form-item label="反转时间：">
                <el-col :span="11">
                  <el-input  v-model="utc" placeholder="时间戳"></el-input>
                </el-col>
                <el-col :span="11">
                  <el-select v-model="toTime" placeholder="请选择" >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-col>
                
              </el-form-item>
              <el-form-item>
                <el-col :sapn="5">
                  <el-button type="primary" @click="utcToTimeFuc()">转换</el-button>  
                </el-col>
               
              </el-form-item>
              <el-form-item>
                <el-col :sapn="5">
                  <el-input  v-model="utcToTime" placeholder="结果"></el-input>
                </el-col>

              </el-form-item>
            </el-form>
          </el-row>

        </div>

      </el-card>
    </el-main>
  </el-container>
</div>


<script>


  var timeUtil = new Vue({
  el: '#timeUtil',
  data() {
      return {
        options: [{
          value: 's',
          label: '秒'
        }, {
          value: 'ms',
          label: '毫秒',
        }],
        toUtc: 's',
        toTime:'s',
        time:"",
        timeToUtc:"",
        utc:"",
        utcToTime:"",

      }
    },
    mounted:function(){
    	this.loadFun()

      this.formate()
    },
    methods: {
      //初始化
    	loadFun(){
    		
    	},
      //时间戳转时间
      timestampToTime(timestamp) {
        if(this.toTime=='s'){
          var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        }else{
          var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        }
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m=date.getMinutes()
        m=this.space(m);
        var m = m + ':';
        var s = date.getSeconds();
        s=this.space(s)

        return Y+M+D+h+m+s
      },
      space(data){
        return data=data>9?data:"0"+data;
      },
      //时间转时间戳
      timeToTimeStamp(time){
        var data=new Date(time)
        if(this.toUtc=='s'){
          return Date.parse(data).toString().substring(0,10)
        }else{
          return data.getTime()
        }

      },
      formate(){
          var current = new Date(+new Date()+8*3600*1000).toISOString();
          var day = current.split("T")[0];
          var time = current.split("T")[1].split(".")[0];
          this.time=day+" "+time
          this.timeToUtc=Date.parse(new Date()).toString().substring(0,10);
          this.utc=this.timeToUtc
          this.utcToTime=this.timestampToTime(this.utc)
      },
      utcToTimeFuc(){
        this.utcToTime=this.timestampToTime(this.utc)
      },
      timeToCtcFuc(){
        this.timeToUtc=this.timeToTimeStamp(this.time)
      },
      synchro(){
        this.utc=this.timeToUtc
      }
            
    }
  
})

</script>